<template>
    <a-dropdown :overlay-style="overlayStyle">
        <div :style="style"
            class="h-10 flex flex-row items-center touchable-opacity text-third text-sm border border-solid border-[#CED4DB] rounded-sm" :class="class">
            <slot />
        </div>
        <template #overlay>
            <a-menu
                style="max-height: 420px; overflow-y: auto; padding: 6px 4px; display: flex; flex-direction: column; gap: 4px;">
                <a-menu-item style="padding: 0; background-color: white;" v-for="item of options" :key="item.value">
                    <div @click="handleSortTap(item)"
                        :class="selectedSorts.includes(item.value) ? 'bg-theme/6 text-theme' : ''"
                        class="flex flex-row items-center justify-center box-border h-8 text-primary text-sm cursor-pointer rounded-sm hover:bg-theme/6">
                        {{ item.label }}
                    </div>
                </a-menu-item>
            </a-menu>
        </template>
    </a-dropdown>
</template>
<script lang="ts" setup generic="T extends string | number">
import type { CSSProperties, StyleValue } from 'vue';

defineOptions({
    name: 'GpDropdownOptionSelect',
    inheritAttrs: false
})
const { options } = defineProps<{
    overlayStyle?: CSSProperties
    style?: StyleValue
    class?: any
    options: IOption<T>[]
}>()
const emit = defineEmits<{
    change: [value: INullable<IOption<T>>]
}>()
const current = ref<INullable<IOption<T>>>(null)
const {
    selects: selectedSorts,
    handleItemTap: handleSortTap
} = useOptionSelect({
    treatAll: false,
    availableOptions: options,
    rollbackSync: false,
    syncSelects(selects) {
        if (selects.length > 0) {
            current.value = options.find(l => l.value === selects[0])!
        } else {
            current.value = null
        }
        emit("change", toValue(current))
    },
})
</script>